<template>
	<view style="padding:50rpx;">
		<view class="gui-flex gui-column header gui-align-items-center gui-justify-content-center">
			<view class="gui-flex gui-align-items-center gui-justify-content-center">
				<image src="../../static/logo-header.png" class="logo-header"></image>
			</view>
			<view class="gui-h1 gui-bold title-header">天泰云平台</view>
		</view>
		<view class="infoInput">
			<form @submit="submit">
				<view class="gui-bold msgTip">短信登录</view>
				<view class="info gui-flex gui-row gui-align-items-center" style="margin-top: 20rpx;">
					<view class="gui-icons Icon gui-color-gray">
						&#xe60c;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="number" name="phone" placeholder="请输入手机号码" v-model="phone" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon gui-color-gray">
						&#xe60e;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%;" class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<input type="number" name="pwd" placeholder="请输入验证码" v-model="pwd" />
						<view style="margin-left: 50rpx;width: 180rpx;height: 60rpx;background-color: #007AFF;color: white;border-radius: 10rpx;" class="gui-flex gui-align-items-center gui-justify-content-center">
							<text class="sendmsg gui-block-text gui-text-center" @tap="getVCode">{{vcodeBtnName}}</text>
						</view>
					</view>
				</view>
				<view class="gui-margin-top gui-flex gui-rows gui-space-between" 
				hover-class="gui-tap">
					<text></text>
					<text class="gui-text gui-color-gray gui-block-text gui-text-right" @tap="loginbypwd">密码登录</text>
				</view>
				<view style="margin-top:38rpx;">
					<button type="default" class="gui-button" formType="submit" 
					style="border-radius:50rpx;background-color: #007AFF;">
						<text class="gui-color-white gui-button-text">登 录</text>
					</button>
				</view>
			</form>
		</view>
		
		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top:80rpx;">
			<view class="gui-title-line"></view>
			<text class="gui-color-gray gui-h6" style="padding-left:50rpx; padding-right:50rpx;" @tap="toabout">关于平台</text>
			<view class="gui-title-line"></view>
		</view>
	</view>
</template>

<script setup>
	import { ref,getCurrentInstance } from 'vue'
	import graceChecker from "@/Grace6/js/checker.js"
	import ybgolbal from '../../lib/js/ybgolbal';
	const ybapi = ybgolbal.getybapi(getCurrentInstance());
	let phone = ref('');
	let pwd = ref('');
	let vcodeBtnName = ref("发送验证码");
	let countNum = ref(120);
	let countDownTimer = ref(null);
	
	function loginbypwd(){
		uni.navigateBack()
	}
	
	function getVCode(){
		var myreg=/^[1][0-9]{10}$/;
		if (!myreg.test(phone.value)){
			uni.showToast({ title: '请正确填写手机号码', icon : "none"});
			return false;
		}
		// 手机号码为 :  this.phone
		// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
		if (vcodeBtnName.value != '发送验证码' && vcodeBtnName.value != '重新发送'){return ;}
		vcodeBtnName.value =  "发送中...";
		// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
		// 假设发送成功，给用户提示
		uni.showToast({ title: '短信已发送，请注意查收', icon : "none"});
		// 倒计时
		countNum.value = 60;
		countDownTimer.value = setInterval(()=>{countDown();}, 1000);
	}
	
	function countDown(){
		if(countNum.value < 1){
			clearInterval(countDownTimer.value);
			vcodeBtnName.value = "重新发送";
			return ;
		}
		countNum.value--;
		vcodeBtnName.value = countNum.value + '秒重发';
	}
	
	function submit(e){
		console.log(e.detail.value);
		// 请利用 graceUI 的表单验证工具
		// 根据项目需要完成数据验证工作
		var formData = e.detail.value;
		console.log(formData);
		// 利用 graceUI 的表单验证工具进行验证
		//定义表单规则
		var rule = [
			{name:"phone", checkType : "phone", checkRule:"", errorMsg:"手机号码有误"},
			{name:"pwd", checkType : "string", checkRule:"4,6", errorMsg:"短信验证码错误"},
		];
		var checkRes = graceChecker.check(formData, rule);
		if(checkRes){ 
			uni.showToast({title:"验证通过!", icon:"none"});
			// 根据项目需要完成数据验证工作
		}else{
			uni.showToast({ title:graceChecker.error, icon: "none" });
		}
	}
	
	function toabout(){
		// 跳转到about页面
		uni.navigateTo({
			url: "/pages/about/about"
		})
	}
</script>

<style>
	.header {
		height: 600rpx;
	}
	
	.logo-header {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	
	.title-header {
		color: #007AFF;
		margin-top: 50rpx;
	}
	
	.infoInput {
		padding: 20rpx;
	}
	
	.msgTip {
		font-size: 38rpx;
		color: #867d85;
	}
	
	.Icon {
		font-size: 25px;
	}
	
	.info {
		height: 50px;
		padding: 0rpx 10rpx;
		border-bottom: 1rpx solid gray;
	}
	
	.sendmsg{
		height:30rpx; 
		width:200rpx; 
		font-size:24rpx; 
		line-height:30rpx;
	}
</style>
